<template>
    <!-- 使用 el-space 组件来布局卡片 -->
    <el-space wrap fill-ratio="" fill>
        <!-- 遍历 takeouts 数组，为每个外卖对象生成一个 TakeoutCard 组件 -->
        <div v-for="item in takeouts" :key="item.id">
            <!-- 传递当前外卖对象给 TakeoutCard 组件 -->
            <TakeoutCard :takeout="item" style="margin-top: 5%;" />
        </div>
    </el-space>
    <!-- 如果 takeouts 数组为空，则显示 el-empty 组件，提示用户这里空空如也 -->
    <el-empty v-show="isEmpty" description="这里空空如也～" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// 导入 TakeoutCard 组件
import TakeoutCard from './TakeoutCard.vue';
// 导入 TakeoutModel 类型
import { TakeoutModel } from '../assets/models/Takeout';
// 导入 takeoutApis API 模块
import { takeoutApis } from '../assets/apis/TakeoutApis';

// 定义一个响应式变量 isEmpty，初始值为 true，用于判断是否显示空状态并
let isEmpty = ref(true);
// 定义一个响应式变量 takeouts，用于存储从 API 获取的外卖数据
const takeouts = ref<Array<TakeoutModel>>();
onMounted(() => {
    // 调用 takeoutApis 的 queryAllTakeout 方法获取所有外卖数据
    takeoutApis.queryAllTakeout()
        .then((value: Array<TakeoutModel>) => {
            // 如果返回的数据不为空，将数据赋值给 takeouts，并将 isEmpty 设置为 false
            if (value) {
                takeouts.value = value;
                isEmpty.value = false;
            } else {
            // 如果返回的数据为空，将 isEmpty 设置为 true
                isEmpty.value = true;
            }
        })
})
</script>